<template>
  <div class="bg">
    <div class="regist_container">
      <h2 class="title">欢迎注册</h2>
      <el-form :rules="rules" ref="registUser" :model="registUser" label-width="80px" class="registForm">
        <el-form-item label="账号:" prop="u_name">
          <div style="display: flex; align-items: center;">
            <el-input prefix-icon="el-icon-user" v-model="registUser.u_name" placeholder="设置账号" style="width: 180px;"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="密码:" prop="u_pwd">
          <el-input prefix-icon="el-icon-lock" v-model="registUser.u_pwd" placeholder="设置密码" style="width: 260px;"></el-input>
        </el-form-item>
        <el-form-item label="确认密码:" prop="ru_pwd">
          <el-input prefix-icon="el-icon-lock" v-model="registUser.ru_pwd" placeholder="确认密码" style="width: 260px;"></el-input>
        </el-form-item>
        <el-form-item class="btns">
          <el-button type="primary" @click="subForm">注册</el-button>
          <el-button type="info" size="medium" @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "Regist",
  data() {
    return {
      registUser: {
        u_name: "",
        u_pwd: "",
        ru_pwd: "",
      },
      rules: {
        u_name: [
          { required: true, message: '请设置姓名', trigger: 'blur' },
          { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
        ],
        u_pwd: [
          { required: true, message: '请设置密码', trigger: 'change' }
        ],
        ru_pwd: [
          { required: true, message: '请确认密码', trigger: 'change' }
        ],
      }
    };
  },
  methods: {
    subForm() {
      this.$refs.registUser.validate((valid) => {
        if (valid) {
          this.userRegist();
        } else {
          this.$message.error("验证失败");
          return false;
        }
      });
    },
    userRegist(){
      //post请求
      this.$axios.post("/user/userRegist",this.registUser).then(res=>{
        console.log(res)
        this.$message.success("注册成功");
        // 可以在这里添加注册成功后的操作，例如跳转到登录页面
       this.$router.push('/login');
      }).catch(error=>{
        this.$message.error("请求失败")
      })
    },
    resetForm() {
      this.$refs.registForm.resetFields();
    }
  }
};
</script>

<style>
.bg {
  background-size: cover; /* 覆盖整个背景 */
  height: 100%; /* 使用视口高度 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.regist_container {
  width: 380px;
  height: 350px;
  background-color: white;
  position: relative; /* 使用相对定位 */
  border-radius: 10px;
  opacity: 0.9;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 阴影效果 */
}

.title {
  text-align: center;
  margin-bottom: 20px; /* 增加标题与表单之间的间距 */
}

.el-form-item {
  margin-bottom:50px; /* 增加表单项之间的间距 */
}

.el-select, .el-input {
  margin-right: 10px; /* 增加选择框和输入框之间的间距 */
}

.el-select {
  width: 100px; /* 调整选择框的宽度 */
}

.el-input {
  width: 230px; /* 调整输入框的宽度 */
}

.el-button--info {
  margin-left: 10px; /* 调整重置按钮与登录按钮的距离 */
}

/* 处理浏览器自动填充时的背景颜色和文本颜色 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px lemonchiffon inset !important; /* 设置背景颜色 */
  -webkit-text-fill-color: black !important; /* 设置文本颜色 */
}
</style>